<template>
  <div>
        <div class="leftarea">
          <div class="back" ></div>
          <div class="closepage" @click="go()">
            <i class="el-icon-close" style="color: white;font-size:30px;margin-top: 12px"></i>
          </div>
            <video  @ended="nextvideo()" id="video" autoplay  controls  style="width:50%;height: 800px;">
              <source type="video/mp4" src=""/>
            </video>
          <div>
            <div class="up" @click="nextvideo()">
              <i class="el-icon-arrow-down" style="color: white;font-size:30px;margin-top: 12px"></i>
            </div>
            <div class="down" @click="prevideo()">
              <i class="el-icon-arrow-up" style="color: white;font-size:30px;margin-top: 12px"></i>
            </div>
          </div>
        </div>

      <div class="rightarea">
        <div class="mess">
          <div style="float: left">
            <el-avatar :src="nowdata.userPic"></el-avatar>
          </div>
          <div class="myusername">
            {{nowdata.userName}}
          </div>
          <div class="videotime">
            {{nowdata.videoCtime}}
          </div>
          <div class="gz" @click="focuses()">
            <i style="font-size: large" :class="focus.type"> {{focus.mess}}</i>
          </div>
        </div>
        <div class="videoinfo">
          <i class="el-icon-edit"></i>
          {{nowdata.videoInfo}}
        </div>
        <div id="txt" class="input">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="一楼在眼前，骚话在嘴边"
            v-model="textarea">
          </el-input>
          <div class="dmopen"  @click="dmopen()">
            <span class="dmicon" :class="icon"></span>
            <i class="el-icon-cpu"></i>
          </div>
          <el-button class="send" type="info"  @click="sends()" round>发送</el-button>
        </div>
        <div class="comment">
            <span v-for="(item,index) of commentList">
              <div class="onecomment">
                <div class="first">
                  <img class="userpic" :src=" item.userPic"/>
              <span class="username">
                  {{item.userName}}
              </span>
              <span class="commenttime">
                {{item.commentTime}}
              </span>
                </div>
                <div class="infoback">
              <div class="commentinfo">
                  {{item.commentInfo}}
              </div>
                </div>
              </div>
            </span>
          <div class="commenttotal">
            <i style="font-size: large" class="el-icon-loading"></i>已加载{{commentTotal}}条评论
          </div>
        </div>
      </div>
    <div id="danmu" ref="danmu">
      <div class="danmuitem" v-for="(v,i) in commentList" :key="i" >
        <p>{{v.commentInfo}}</p>
      </div>
    </div>
    <div class="good" @click="addhot()">
      <i style="font-size:60px;color: rgb(150,84,84)" class="el-icon-magic-stick"></i>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "videoplay",
    data(){
      return{
        textarea:'',
        videoId:'',
        icon:'el-icon-close',
        commentList:[
        ],
        commentTotal:'0',
        commentBase:{},
        focus:{
          type:'el-icon-plus',
          mess:'关注'
        },
        nowdata:{
          },
      }
    },
    methods:{
      go:function(){
          this.$router.go(-1);
      },
      getcomment:function(videoId){
        axios.post("http://localhost/kd-comment/comment/selectbyvideoid",{"videoId":videoId}).then(res=>{
          if(res.data.code===200){
            this.commentList=res.data.data;
            this.commentTotal=res.data.total;
          }else{
            this.$notify.info({
              title: '消息',
              message: res.data.message
            });
            this.commentTotal=res.data.total;
          }
        })
      },
      sends:function (){
        this.commentBase.commentInfo=this.textarea;
        this.commentBase.videoId=this.videoId;
        axios.post("http://localhost/kd-comment/comment/sendcomment",this.commentBase).then(res=>{
            if(res.data.code===200){
              if(this.commentList===''){
              }else{
                this.commentList.unshift(res.data.data);
              }
            }
        });
        this.textarea='';
      },
      focuses:function () {
        if(this.focus.mess==="关注"){
          axios.post("http://localhost/kd-user/user/beingmystar",{"starId":this.nowdata.videoUserid}).then(res=>{
              if(res.data.code===200){
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.focus.mess="已关注";
                this.focus.type="el-icon-check";
              }
          })
        }else{
          axios.post("http://localhost/kd-user/user/delmystar",{"starId":this.nowdata.videoUserid}).then(res=>{
            if(res.data.code===200){
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.focus.mess="关注";
              this.focus.type="el-icon-plus";
            }
          })
        }
      },
      checkisfansorno(){
        axios.post("http://localhost/kd-user/user/checkisfansorno",{"starId":this.nowdata.videoUserid}).then(res=>{
          if(res.data.code===200){
            this.focus.mess="已关注";
            this.focus.type="el-icon-check";
          }else{
            this.focus.mess="关注";
            this.focus.type="el-icon-plus";
          }
        })
      },
      getvideo:function(){
        axios.post("http://localhost/kd-video/video/selectvideo",{"videoId":this.videoId}).then(res=>{
          if(res.data.code===200){
            this.nowdata=res.data.data;
            this.$nextTick(function (){
              video.src = res.data.data.videoUrl;
              this.getcomment(this.videoId);    //获取评论
              this.checkisfansorno();           //加载是否关注
            })
          }
        })
      },
      nextvideo:function () {
        this.commentList='';
        this.nowdata.userPic='';
        var videoId=this.videoId+1;
        axios.post("http://localhost/kd-video/video/selectvideo",{"videoId":videoId}).then(res=>{
          if(res.data.code===200){
            this.nowdata=res.data.data;
            this.$nextTick(function (){
              video.src = res.data.data.videoUrl;
              this.videoId=res.data.data.videoId;
              this.getcomment(this.videoId);
              this.checkisfansorno();
            })
          }
        })
      },
      prevideo:function () {
        this.commentList='';
        this.nowdata.userPic='';
        var videoId=this.videoId-1;
        axios.post("http://localhost/kd-video/video/selectvideo",{"videoId":videoId}).then(res=>{
          if(res.data.code===200){
            this.nowdata=res.data.data;
            this.$nextTick(function (){
              video.src = res.data.data.videoUrl;
              this.videoId=res.data.data.videoId;
              this.getcomment(this.videoId);
              this.checkisfansorno();
            })
          }
        })
      },
      addhot:function () {
        axios.post("http://localhost/kd-video/video/addhot",{"videoId":this.videoId}).then(res=>{
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong>Ta <i>已经收到你的</i> 点赞啦</strong>'
          });
        })
      },
      dmopen(){
        if(this.icon==="el-icon-close"){
          this.icon="el-icon-check";
          var danmu=document.getElementById("danmu");
          danmu.style.display="block";
          this.getdanmu();
        }else{
          this.icon="el-icon-close";
          var danmu=document.getElementById("danmu");
          danmu.style.display="none";
        }
      },
    },
    created() {
      var videoId=this.$cookie.get("videoId");
      this.videoId=videoId;
      this.getvideo();
    },
    updated(){

      for (let i=0; i<this.$refs.danmu.children.length; i++){
        console.log(this.$refs.danmu.children[i].children[0].offsetWidth);
        let width = this.$refs.danmu.children[i].children[0].offsetWidth;
        this.$refs.danmu.children[i].children[0].style.left = "-"+width+"px";
      }

    }
  }
</script>

<style scoped>
  .leftarea{
    float: left;
    height: 800px;
    width: 65%;
    }

  .back{
    background-image: linear-gradient(rgb(66,61,62), rgb(101,101,101));
    position: absolute;
    height: 800px;
    width: 925px;
    top: 8px;
    left: 8px;
    z-index: -1;
  }

  .closepage{
    width: 56px;
    height: 56px;
    background-size: 100% auto;
    background-color: rgb(143,147,156);
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 100%;
  }
  .up{
    width: 56px;
    height: 56px;
    position: absolute;
    top: 700px;
    left: 740px;
    background-color: rgb(143,147,156);
    border-radius: 100%;
  }
  .down{
    width: 56px;
    height: 56px;
    position: absolute;
    top: 600px;
    left: 740px;
    background-color: rgb(143,147,156);
    border-radius: 100%;
  }
  .rightarea{
    overflow: auto;
    float: left;
    height: 800px;
    width: 35%;
    color: whitesmoke;
    background-color: rgb(34,34,34);
    box-shadow: -10px 0px 5px #888888;
  }

  .mess{
    margin: 50px 0 0 50px;
    width: 400px;
    height: 50px;
  }

  .myusername{
    font-size: x-large;
    float: left;
    margin: 0 0 0 20px;
    line-height: 50px;
  }

  .videotime{
    font-size: large;
    float: left;
    margin: 0 0 0 20px;
    line-height: 30px;
  }

  .gz{
    background-color: rgb(134,150,167);
    float: right;
    margin: 0 5px 0 0;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    cursor: pointer;
  }

  .videoinfo{
    margin: 30px 0 0 50px;
    width: 400px;
    height: 50px;
    font-size: large;
  }

  .input{
    margin: 30px 0 0 50px;
    width: 400px;
    height: 50px;
  }

  .send{
    float: right;
    margin: 10px 10px 0 0;
  }

  .dmopen{
    cursor: pointer;
    font-size: 50px;
    float: left;
    margin: 10px 0 0 0;
    color: rgb(238,229,248);
  }

  .dmicon{
    font-size: large;
    float: left;
    margin: 10px 0 0 20px;
  }

  .send:hover{
    box-shadow: #ccc 0px 10px 10px;
  }

  .comment{
    width: 400px;
    height: 280px;
    margin: 170px 0 0 50px;
  }

  .onecomment{
    width: 400px;
    height: 100px;
  }

  .first{
    width: 400px;
    height: 40px;
  }

  .userpic{
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 10px;
    border-radius: 100%;
  }

  .username{
    float: left;
    margin-left: 15px;
    color: white;
    line-height: 40px;
  }
  .commenttime{
    float: right;
  }

  .infoback{
    margin-left: 60px;
    width: 350px;
    height: 50px;
    background-color: rgb(43,43,43);
    border-radius: 10px;
  }

  .infoback:hover{
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
  }

  .commentinfo{
    margin-left: 40px;
    line-height: 50px;
    float: left;
  }

  #danmu{
    display: block;
    width: 520px;
    height: 220px;
    font-size: 36px;
    position: absolute;
    top: 60px;
    left: 200px;
    z-index: 1;
    overflow: hidden;
  }
  #danmu .danmuitem{
    width: 100%;
    height: 50px;
    position: relative;
  }
  #danmu .danmuitem p{
    width: 200px;
    font-size: 18px;
    line-height: 50px;
    color: #333;
    position: absolute;
    left: 600px;
    transition: all 7s ease-in-out;
  }
  .good{
    cursor: pointer;
    width: 50px;
    height: 20px;
    position: absolute;
    top: 35px;
    left: 840px;
  }

  .commenttotal{
    margin: 20px 0 10px 0;
  }

/*滚动条优化*/

  ::-webkit-scrollbar{
    /*垂直滚动条的宽*/
    width: 5px;
    height: 16px;
  }
  ::-webkit-scrollbar-track-piece{
    /*修改滚动条的背景和圆角*/
    background: #abcdef;
    -webkit-border-radius: 6px;
  }
  /*修改垂直滚动条的样式*/
  ::-webkit-scrollbar-thumb:vertical{
    background-color: #ffffff;
    -webkit-border-radius: 6px;
  }

  /*修改水平滚动条的样式*/
  ::-webkit-scrollbar-thumb:horizontal{
    background-color: #faa;
    -webkit-border-radius: 6px;
  }

</style>
